

<template>
  <div class="w-[350px] border border-gray-200 bg-white p-3 shadow-md rounded-lg " @click="openDrawer">
    <Handle type="target" :position="Position.Left" />
    <div class="flex flex-col gap-y-4">
      <div class="flex justify-between">
        <div class="flex items-center gap-x-2">
          <img src="~@/assets/images/icon_End.png" class="w-6 h-6" alt="End ico n" />
          <div class="flex flex-col gap-y-1">
            <p class="text-lg font-semibold text-balck">结束</p>
          </div>
        </div>
      </div>
      <CommonDisplayModule title="输出" value-name="type" :valueList="data?.inoutlist" />

      <div class="flex items-center">
        <div class="node-sub-text">输出类型</div>
        <div class="ml-2 node-text">{{ DEFAULT_END_TAB_VALUE[data.retruevarortext] }}</div>
      </div>
    </div>
  </div>
  <EndDrawerModule ref="endDrawerRef" :form="data" @add="handleClickAddBtn" @remove="handleClickDeleteBtn" @cancel="onCancel" />
</template>
<script setup>
import { ref } from 'vue';
import { Handle, Position, useNode } from '@vue-flow/core';
import { editNode } from '@/api/modules/flow';

import { DEFAULT_END_TAB_VALUE } from '../../lib/constant';

import EndDrawerModule from '../modules/end-drawer-module.vue';
import CommonDisplayModule from '../modules/common-display-module.vue';

defineProps();

const node = useNode();

const data = ref({
  retruevarortext: node.node.data?.retruevarortext || 'var',
  content: node.node.data?.content || '',
  isflow: node.node.data?.isflow,
  inoutlist: node.node.data?.inoutlist || [],
})


const endDrawerRef = ref(null);
const openDrawer = () => {
  endDrawerRef.value?.init();
};


function handleClickAddBtn() {
  data.value.inoutlist.push({
    varname: '',
    vartype: 'String',
    varparam: ''
  });
  node.node.data = {
    ...node.node.data,
  };
}

function handleClickDeleteBtn(index) {
  data.value.inoutlist.splice(index, 1);
  node.node.data = {
    ...node.node.data,
  };
}

const onCancel = async() => {
  await editNode({data: { id: node.id, ...data.value}})
}
</script>